<template>
	<view>
		<view :class="['page',data.__page_classes]">
		<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
		<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
    <view class="body after-navber">
        <view class="bottom-bar flex-row">
            <view class="flex-y-center flex-grow-1" style="padding: 0 24upx">
                <view @tap="cartCheckAll" class="flex-grow-0 flex-y-center" style="margin-right: 20upx">
                    <view :class="['cart-checkbox',data.cart_check_all?'active':'']" style="margin-right: 10upx"></view>
                    <text style="white-space: nowrap">全选</text>
                </view>
                <view class="flex-grow-1" style="color:#ff4544;white-space: nowrap">
                    总计:￥{{data.total_price}}
                </view>
            </view>
            <block v-if="data.show_cart_edit">
                <view @tap="cartDone" class="flex-y-center flex-grow-0 flex-x-center edit-btn">完成</view>
                <view @tap="cartDelete" class="flex-y-center flex-grow-0 flex-x-center submit-btn">删除</view>
            </block>
            <block v-else>
                <view @tap="cartEdit" class="flex-y-center flex-grow-0 flex-x-center edit-btn">编辑</view>
                <view @tap="cartSubmit" class="flex-y-center flex-grow-0 flex-x-center submit-btn">结算</view>
            </block>
        </view>
        <view class="no-data-tip" v-if="!data.cart_list.length&&!data.store_list.length&&!data.loading">
            <view class="no-data-icon flex-y-center flex-x-center">
                <image :src="data.__wxapp_img.nav.cart.url" style="width: 81upx;height: 81upx"></image>
            </view>
            <view>购物车还是空的哦</view>
        </view>
        <block v-else>
            <block v-if="data.cart_list&&data.cart_list.length">
                <view class="flex flex-row store-header">
                    <view @tap="checkGroup" class="flex-grow-0 flex-y-center" data-index="0" data-type="self" style="padding: 24upx">
                        <view :class="['cart-checkbox',data.check_all_self?'active':'']"></view>
                    </view>
                    <view class="flex-grow-1 flex-y-center">平台自营</view>
                </view>
                <view class="cart-list">
                    <view class="cart-item flex-row" v-for="(item,index) in data.cart_list" :key="item.id">
                        <view class="flex-grow-0 flex-y-center" style="padding: 24upx" v-if="item.disabled&&!data.show_cart_edit">
                            <view style="width: 40upx"></view>
                        </view>
                        <view @tap="cartCheck" class="flex-grow-0 flex-y-center" :data-index="index" data-store-index="0" data-type="self" style="padding: 24upx" v-else>
                            <view :class="['cart-checkbox',item.checked?'active':'']"></view>
                        </view>
                        <view class="flex-grow-1">
                            <view class="flex-grow-1 flex-row">
                                <view class="flex-grow-0">
                                    <navigator :url="'/pages/goods/goods?id='+item.goods_id">
                                        <image class="goods-pic" mode="aspectFill" :src="item.goods_pic"></image>
                                    </navigator>
                                </view>
                                <view class="flex-grow-1 flex-col">
                                    <view class="flex-grow-1">
                                        <view class="goods-name">
                                            <navigator :url="'/pages/goods/goods?id='+item.goods_id">{{item.goods_name}}</navigator>
                                        </view>
                                        <view class="attr-list">
                                            <view class="attr-item" v-for="(attr,i) in item.attr_list" :key="item.id">
                                                {{attr.attr_group_name}}:{{attr.attr_name}}
                                            </view>
                                        </view>
                                    </view>
                                    <view class="flex-grow-0 flex-row">
                                        <view class="flex-grow-1 price">￥{{item.unitPrice}}</view>
                                        <view>
                                            <view class="flex-row">
                                                <image @tap="cartLess" class="image1" :id="item.cart_id" :src="data.__wxapp_img.cart.less.url" v-if="item.num>1"></image>
                                                <image class="image1" :src="data.__wxapp_img.cart.no_less.url" v-else></image>
                                                <view class="row-data">{{item.num}}</view>
                                                <image class="image1" :src="data.__wxapp_img.cart.no_add.url" v-if="item.num==item.max_num"></image>
                                                <image @tap="cartAdd" class="image1" :id="item.cart_id" :src="data.__wxapp_img.cart.add.url" v-if="item.num!=item.max_num"></image>
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                            <view>
                                <text class="cart-tag" v-if="item.num>item.max_num">库存不足</text>
                            </view>
                        </view>
                    </view>
                </view>
            </block>
            <block v-if="data.store_list&&data.store_list.length">
                <view class="store-item" v-for="(item,store_index) in data.store_list" :key="item.id">
                    <view class="flex flex-row store-header">
                        <view @tap="checkGroup" class="flex-grow-0 flex-y-center" :data-index="store_index" data-type="store" style="padding: 24upx">
                            <view :class="['cart-checkbox',item.checked_all?'active':'']"></view>
                        </view>
                        <view class="flex-grow-1 flex-y-center">{{item.name}}</view>
                    </view>
                    <view class="cart-list">
                        <view class="cart-item flex-row" v-for="(items,i) in item.list" :key="items.id">
                            <view class="flex-grow-0 flex-y-center" style="padding: 24upx" v-if="items.disabled&&!data.show_cart_edit">
                                <view style="width: 40upx"></view>
                            </view>
                            <view @tap="cartCheck" class="flex-grow-0 flex-y-center" :data-index="i" :data-store-index="store_index" data-type="store" style="padding: 24upx" v-else>
                                <view :class="['cart-checkbox',items.checked?'active':'']"></view>
                            </view>
                            <view class="flex-grow-1">
                                <view class="flex-grow-1 flex-row">
                                    <view class="flex-grow-0">
                                        <image class="goods-pic" mode="aspectFill" :src="items.goods_pic"></image>
                                    </view>
                                    <view class="flex-grow-1 flex-col">
                                        <view class="flex-grow-1">
                                            <view class="goods-name">
                                                <navigator :url="'/pages/goods/goods?id='+items.goods_id">{{items.goods_name}}</navigator>
                                            </view>
                                            <view class="attr-list">
                                                <view class="attr-item" v-for="(attr,ii) in items.attr_list" :key="attr.id">
                                                        {{attr.attr_group_name}}:{{attr.attr_name}}
                                                    </view>
                                            </view>
                                        </view>
                                        <view class="flex-grow-0 flex-row">
                                            <view class="flex-grow-1 price">￥{{items.unitPrice}}</view>
                                            <view>
                                                <view class="flex-row">
                                                    <image @tap="cartLess" class="image1" :data-index="ii" :data-store-index="store_index" data-type="store" :id="items.cart_id" :src="data.__wxapp_img.cart.less.url" v-if="items.num!=1"></image>
                                                    <image class="image1" :src="data.__wxapp_img.cart.no_less.url" v-if="items.num==1"></image>
                                                    <view class="row-data">{{items.num}}</view>
                                                    <image class="image1" :src="data.__wxapp_img.cart.no_add.url" v-if="items.num==items.max_num"></image>
                                                    <image @tap="cartAdd" class="image1" :data-index="ii" :data-store-index="store_index" data-type="store" :id="items.cart_id" :src="data.__wxapp_img.cart.add.url" v-if="items.num!=items.max_num"></image>
                                                </view>
                                            </view>
                                        </view>
                                    </view>
                                </view>
                                <view>
                                    <text class="cart-tag" v-if="items.num>items.max_num">库存不足</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </block>
            <view style="height: 109upx"></view>
        </block>
    </view>
    <comp-footer v-bind="{data:data}"></comp-footer>
</view>

	</view>
</template>

<script>var myVue = {};
	export default {
		data() {
			return {
				data: {
						total_price: 0,
						cart_check_all: !1,
						cart_list: [],
						store_list: [],
						loading: !0,
						check_all_self: !1
				}
			};
		},
		onLoad: function(t) {myVue = this;
			myVue.getApp.page.onLoad(this, t);
		},
		onShow: function() {
			myVue.getApp.page.onShow(this);
			var t = this;
			t.setData({
				cart_check_all: !1,
				show_cart_edit: !1,
				check_all_self: !1
			}), t.getCartList();
		},
		onHide: function() {
			this.saveCart();
		},
		onUnload: function() {
			this.saveCart();
		},
		methods:{
			getCartList: function() {
        var t = this;
        myVue.getApp.core.showNavigationBarLoading(), t.setData({
            show_no_data_tip: !1,
            loading: !0
        }), myVue.getApp.request({
            url: myVue.getApp.api.cart.list,
            success: function(a) {
                0 == a.code && t.setData({
                    cart_list: a.data.list,
                    store_list: a.data.store_list,
                    total_price: 0,
                    cart_check_all: !1,
                    show_cart_edit: !1
                }), t.setData({
                    show_no_data_tip: 0 == t.data.cart_list.length
                });
            },
            complete: function() {
                t.getApp.core.hideNavigationBarLoading(), t.setData({
                    loading: !1
                });
            }
        });
    },
	cartLess: function(t) {
        var a = this;
        if (t.currentTarget.dataset.type && "store" == t.currentTarget.dataset.type) {
            var i = t.currentTarget.dataset.storeIndex, c = t.currentTarget.dataset.index;
            a.data.store_list[i].list[c].num = a.data.store_list[i].list[c].num - 1, a.data.store_list[i].list[c].price = a.data.store_list[i].list[c].num * a.data.store_list[i].list[c].unitPrice,
            a.setData({
                store_list: a.data.store_list
            });
        } else {
            var e = a.data.cart_list;
            for (var s in e) t.currentTarget.id == e[s].cart_id && (e[s].num = a.data.cart_list[s].num - 1, 
            e[s].price = a.data.cart_list[s].unitPrice * e[s].num, a.setData({
                cart_list: e
            }));
        }
        a.updateTotalPrice();
    },
    cartAdd: function(t) {
        var a = this;
        if (t.currentTarget.dataset.type && "store" == t.currentTarget.dataset.type) {
            var i = t.currentTarget.dataset.storeIndex, c = t.currentTarget.dataset.index;
            a.data.store_list[i].list[c].num = a.data.store_list[i].list[c].num + 1, a.data.store_list[i].list[c].price = a.data.store_list[i].list[c].num * a.data.store_list[i].list[c].unitPrice,
            a.setData({
                store_list: a.data.store_list
            });
        } else {
            var e = a.data.cart_list;
            for (var s in e) t.currentTarget.id == e[s].cart_id && (e[s].num = a.data.cart_list[s].num + 1, 
            e[s].price = a.data.cart_list[s].unitPrice * e[s].num, a.setData({
                cart_list: e
            }));
        }
        a.updateTotalPrice();
    },
    cartCheck: function(t) {
        var a = this, i = t.currentTarget.dataset.index, c = t.currentTarget.dataset.type, e = t.currentTarget.dataset.storeIndex;
        "self" == c && (a.data.cart_list[i].checked = !a.data.cart_list[i].checked, a.setData({
            cart_list: a.data.cart_list
        })), "store" == c && (a.data.store_list[e].list[i].checked = !a.data.store_list[e].list[i].checked,
        a.setData({
            store_list: a.data.store_list
        })), a.updateTotalPrice();
    },
    cartCheckAll: function() {
        var t = this, a = t.data.cart_list, i = !1;
        i = !t.data.cart_check_all;
        for (var c in a) a[c].disabled && !t.data.show_cart_edit || (a[c].checked = i);
        if (t.data.store_list && t.data.store_list.length) for (var c in t.data.store_list) for (var e in t.data.store_list[c].list) t.data.store_list[c].list[e].checked = i;
        t.setData({
            cart_check_all: i,
            cart_list: a,
            store_list: t.data.store_list
        }), t.updateTotalPrice();
    },
    updateTotalPrice: function() {
        var t = this, a = 0, i = t.data.cart_list;
        for (var c in i) i[c].checked && (a += i[c].price);
        for (var c in t.data.store_list) for (var e in t.data.store_list[c].list) t.data.store_list[c].list[e].checked && (a += t.data.store_list[c].list[e].price);
        t.setData({
            total_price: a.toFixed(2)
        });
    },
    cartSubmit: function() {
        var t = this, a = t.data.cart_list, i = t.data.store_list, c = [], e = [], s = [], r = [];
        for (var l in a) a[l].checked && (c.push(a[l].cart_id), r.push({
            cart_id: a[l].cart_id
        }));
        c.length > 0 && s.push({
            store_id: 0,
            goods_list: r
        });
        for (var l in i) {
            var d = [], n = [];
            if (i[l].list && i[l].list.length) for (var h in i[l].list) i[l].list[h].checked && (d.push(i[l].list[h].cart_id), 
            n.push({
                cart_id: i[l].list[h].cart_id
            }));
            d.length && (e.push({
                id: i[l].id,
                cart_id_list: d
            }), s.push({
                store_id: i[l].id,
                goods_list: n
            }));
        }
        if (0 == c.length && 0 == e.length) return !0;
        myVue.getApp.core.showLoading({
            title: "正在提交",
            mask: !0
        }), t.saveCart(function() {
            t.getApp.core.navigateTo({
                url: "/pages/new-order-submit/new-order-submit?store_list=" + JSON.stringify(s)
            });
        }), myVue.getApp.core.hideLoading();
    },
    cartEdit: function() {
        var t = this, a = t.data.cart_list;
        for (var i in a) a[i].checked = !1;
        t.setData({
            cart_list: a,
            show_cart_edit: !0,
            cart_check_all: !1
        }), t.updateTotalPrice();
    },
    cartDone: function() {
        var t = this, a = t.data.cart_list;
        for (var i in a) a[i].checked = !1;
        t.setData({
            cart_list: a,
            show_cart_edit: !1,
            cart_check_all: !1
        }), t.updateTotalPrice();
    },
    cartDelete: function() {
        var t = this, a = t.data.cart_list, i = [];
        for (var c in a) a[c].checked && i.push(a[c].cart_id);
        if (t.data.store_list && t.data.store_list.length) for (var c in t.data.store_list) for (var e in t.data.store_list[c].list) t.data.store_list[c].list[e].checked && i.push(t.data.store_list[c].list[e].cart_id);
        if (0 == i.length) return !0;
        myVue.getApp.core.showModal({
            title: "提示",
            content: "确认删除" + i.length + "项内容？",
            success: function(a) {
                if (a.cancel) return !0;
                t.getApp.core.showLoading({
                    title: "正在删除",
                    mask: !0
                }), t.getApp.request({
                    url: t.getApp.api.cart.delete,
                    data: {
                        cart_id_list: JSON.stringify(i)
                    },
                    success: function(a) {
                        t.getApp.core.hideLoading(), t.getApp.core.showToast({
                            title: a.msg
                        }), 0 == a.code && t.getCartList(), a.code;
                    }
                });
            }
        });
    },
    saveCart: function(t) {
        var a = this, i = JSON.stringify(a.data.cart_list);
        myVue.getApp.request({
            url: myVue.getApp.api.cart.cart_edit,
            method: "post",
            data: {
                list: i,
                store_list: JSON.stringify(a.data.store_list)
            },
            success: function(t) {
                t.code;
            },
            complete: function() {
                "function" == typeof t && t();
            }
        });
    },
    checkGroup: function(t) {
        var a = this, i = t.currentTarget.dataset.type, c = t.currentTarget.dataset.index;
        if ("self" == i) {
            for (var e in a.data.cart_list) a.data.cart_list[e].checked = !a.data.check_all_self;
            a.setData({
                check_all_self: !a.data.check_all_self,
                cart_list: a.data.cart_list
            });
        }
        if ("store" == i) {
            for (var e in a.data.store_list[c].list) a.data.store_list[c].list[e].checked = !a.data.store_list[c].checked_all;
            a.data.store_list[c].checked_all = !a.data.store_list[c].checked_all, a.setData({
                store_list: a.data.store_list
            });
        }
        a.updateTotalPrice();
    }
		}
	}
</script>

<style scoped>


.bottom-bar {
    position: fixed;
    bottom: var(--window-bottom);
    left: 0;
    height: 100upx;
    background: #fff;
    border-top: 1upx solid #e3e3e3;
    width: 100%;
    z-index: 1000;
}

.cart-list {
    padding-bottom: 24upx;
}

.bottom-bar .submit-btn {
    background: #ff4544;
    color: #fff;
    width: 160upx;
    text-align: center;
}

.bottom-bar .edit-btn {
    background: #3c8ee5;
    color: #fff;
    width: 160upx;
    text-align: center;
}

.cart-checkbox {
    display: inline-block;
    width: 40upx;
    height: 40upx;
    background-size: 100% 100%;
    background-image: url();
}

.cart-checkbox.active {
    background-image: url();
}

.cart-item {
    background: #fff;
    border-bottom: 1upx solid #e3e3e3;
    padding: 32upx 24upx 16upx 0;
}

.cart-item .goods-pic {
    width: 156upx;
    height: 156upx;
    margin-right: 20upx;
}

.cart-item .goods-name {
    margin-bottom: 10upx;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cart-item .attr-list,.cart-item .num {
    font-size: 9pt;
    color: #888;
}

.cart-item .attr-list .attr-item {
    display: inline-block;
    margin-right: 36upx;
}

.cart-item .attr-list .attr-item:last-child {
    margin-right: 0;
}

.cart-item .price {
    color: #ff4544;
}

.cart-item .cart-tag {
    font-size: 8pt;
    color: #ff4544;
    background: #ffd3d6;
    padding: 3upx 6upx;
}

.page.show_navbar .body .bottom-bar {
    bottom: 115upx;
}

.page.show_navbar.device_iphone_x .body .bottom-bar {
    bottom: 180upx;
}

.image1 {
    width: 60upx;
    height: 60upx;
}

.row-data {
    height: 60upx;
    margin: 0 4upx;
    padding-top: 10upx;
    width: 88upx;
    text-align: center;
    background: #f7f7f7;
    font-size: 11pt;
    color: #353535;
}

.store-header {
    background: #fff;
    border-top: 1upx solid #e3e3e3;
    border-bottom: 1upx solid #e3e3e3;
}
</style>
